<template>
 <div class="flex  w-full justify-center h-full" >
   <div style="width:800px;" class="flex flex-col bg-white h-full">
    <div class="m-2 p-2 flex justify-between">
        <div class="flex">
          <div class="text-lg font-bold "><ShoppingCartOutlined /></div>
          <div class="text-lg font-bold ml-2">购物车</div>
        </div>
        <div class="flex mr-4">
        <a-button  @click="delall" :disabled="data.length==0">清空购物车</a-button>
        </div>
         
    </div>
    <a-table :columns="columns" :data-source="data" :pagination="false" :rowKey="record=>record.id"    :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
        

         <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'kcimg'">
             
                <img :src="'/js'+record.kcimg" style="width:100px;height:60px;"/>
              
            </template>

            <template v-else-if="column.key === 'cartprice'">
             
                <span class="text-red-500">￥{{record.cartprice}}</span>
              
            </template>

            <template v-else-if="column.key === 'action'">
             
               <a-button type="link" @click="delcart(record)">删除</a-button>
              
            </template>
         </template>
    </a-table>
    <div class="flex justify-between items-center " style="background:#f5f5f5">
         <div class="font-bold ml-4"></div>
         <div>
         <span class="text-lg text-red-500">总计:￥{{allmoney}}元</span>
         <a-button type="primary" size="large" :disabled="allmoney==0" class="m-5" @click="pregoorderpage">去结算</a-button>
         </div>
    </div>
  
    <!-- 订单抽屉-->
   <a-modal
        centered="true"
        :footer="null"
        width="40%"
        :closable="false"
        :maskClosable="false"
        v-model:visible="visibleD"
        :destroyOnClose="true"
        :after-visible-change="afterVisibleChange"
      >
      <template #title>
          <span style="font-weight: 500; font-size:16px;padding:8px;">订单支付</span>
      </template>
    <OrdercrateAndPay ref="orderRef"  :preorderInfo="preorderInfo"  :status="status"  @changeorderstatus="changeorderstatus" @orderpaysuccess="orderpaysuccess"/>

    
  </a-modal>

  </div>
  </div>
</template>
<script lang="ts">
import { ShoppingCartOutlined, DeleteOutlined} from '@ant-design/icons-vue';
import { ref,defineComponent ,computed,reactive } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { Table,Modal } from 'ant-design-vue';
import { getUserCartList,clearallUserCart,removeCartById ,precreateOrder } from '/@/api/dp/dpbaseapi';
import OrdercrateAndPay from '/@/views/dp/userorder/ordercreate.vue';
export default defineComponent({
 
  components: {
    
   
    ShoppingCartOutlined, 
    DeleteOutlined,
    ATable:Table,
    AModal:Modal
  },
});
</script>

<script lang="ts" setup>  
const columns = [

  {
    title: '商品图片',
    dataIndex: 'kcimg',
    key: 'kcimg',
    align:'center',
    width:'120px',
    scopedSlots: { customRender: 'imgSlot' },
   
  },
  {
    title: '商品名称',
    dataIndex: 'kctitle',
    key: 'kctitle',
     align:'left'
  },
  {
    title: '价格',
    dataIndex: 'cartprice',
    key: 'cartprice',
     align:'center'
  },
  {
    title: '数量',
     align:'center',
    key: 'cartnum',
    dataIndex: 'cartnum',
    
  },
  {
    title: '操作',
    key: 'action',
    align:'center'
  },
];
 const userStore = useUserStore();
const data =ref([]);
const allmoney=ref(0);
getusercart();
 async function getusercart(){
   const res=await getUserCartList();
   data.value=res;

   jsmoney();
  //循环计算金额
  //var tmpmoney=0;
  // for(var i=0;i<res.length;i++){
   //   tmpmoney+=res[i].cartprice;
   //}
   //allmoney.value=tmpmoney;
 }

 function jsmoney(){
   var tmpmoney=Number(0);
   //alert(JSON.stringify(state.selectedRowKeys))
   for(var i=0;i<data.value.length;i++){
       if(state.selectedRowKeys.includes(data.value[i].id)){
        console.log(11111)
        console.log(data.value[i])
        tmpmoney+=Number(data.value[i].cartprice);
      }else{
        console.log('---no---'+data.value[i].id)
      }
   }
   allmoney.value=tmpmoney.toFixed(2);
 }
function pregoorderpage(){
  if(allmoney.value==0){
    //
    showMessage();
    return;
  }
  //否则就去下单
   goorderpage();
}
async function delcart(obj){
   const res=await removeCartById({id:obj.id});
  getusercart();
   userStore.setCartList();
}

async function delall(){
   const res=await clearallUserCart({});
   getusercart();
    userStore.setCartList();
}
//订单相关开始
  const visibleD = ref<boolean>(false);
  const status=ref(0);
  const preorderInfo=ref({});
  
  async function goorderpage (vipid)  {
      //构建数据
      status.value=0;
      var list=[];
      for(var i=0;i<data.value.length;i++){
       if(state.selectedRowKeys.includes(data.value[i].id)){
          list.push(data.value[i]);
       }
      }
      
      let arrs=[];
      for(var i=0;i<list.length;i++){
        arrs.push( {
              ordertype:"2",
              typeid:list[i].kcid,
              shuliang:1
            });
      }
      
      let  orderobj={
          title:'课程购买',
          orderdetails:arrs
       };
     
      //查询订单 
    
     const preinfo= await precreateOrder(orderobj);
     console.log(preinfo);
     preorderInfo.value=preinfo;

     visibleD.value = true;
     // visible.value = false;
     
  };
  function orderpaysuccess(){
       visibleD.value = false;

   }
    function changeorderstatus(v){
       status.value = v;

   }

   const state = reactive<{
      selectedRowKeys: Key[];
      loading: boolean;
    }>({
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
    });
const hasSelected = computed(() => state.selectedRowKeys.length > 0);

const start = () => {
  state.loading = true;
  // ajax request after empty completing
  setTimeout(() => {
    state.loading = false;
    state.selectedRowKeys = [];
  }, 1000);
};
const onSelectChange = (selectedRowKeys: Key[]) => {
  console.log('selectedRowKeys changed: ', selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;

  jsmoney();
};
</script>

